<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :search-path="searchPath"
      :form="form"
      @multipleSelection="multipleSelection"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import SearchDatePicker from '@/components/SearchDatePicker'
import { queryTimecardList, deleteTimecard } from '@/api/timeCard'
import formatter from '@/utils/format'
export default {
  name: 'TimeCardList',
  components: { TableSearch, SearchDatePicker },
  data() {
    return {
      form: {
        integralId: '',
        batchNum: this.$route.query.batchNum,
        endTime: null,
        startTime: null,
        status: null,
      },
      batchNumArr: [],
      searchPath: '/web/timecard-management/timecard/查询',
      tableBtns: [
        {
          label: '批量删除',
          click: this.handleBatchDelete,
          icon: 'el-icon-delete',
          resourceId: '/web/timecard-management/timecard/批量删除',
          type: 'warning',
        },
      ],
      formItemsInline: [
        {
          type: 'text',
          value: 'batchNum',
          placeholder: '请输入批次号',
          clearable: true,
        },
        {
          type: 'text',
          value: 'integralId',
          placeholder: '请输入券码',
          clearable: true,
          resourceId: '/web/timecard-management/timecard/券码',
        },
        {
          slot: 'date',
        },
        {
          type: 'select',
          value: 'status',
          placeholder: '券码状态',
          clearable: true,
          options: [
            {
              label: '待绑定',
              value: 0,
            },
            {
              label: '已绑定',
              value: 1,
            },
          ],
          resourceId: '/web/timecard-management/timecard/状态',
        },
      ],
      columns: [
        {
          type: 'selection',
          resourceId: '/web/timecard-management/timecard/全选',
        },
        {
          label: '券码',
          prop: 'integralId',
          resourceId: '/web/timecard-management/timecard/券码',
        },
        {
          label: '地区',
          prop: 'nationName',
          resourceId: '/web/timecard-management/timecard/地区',
        },
        {
          label: '添加时间',
          prop: 'createTime',
          formatter,
          resourceId: '/web/timecard-management/timecard/添加时间',
        },
        {
          label: '时长(小时)',
          prop: 'initialTime',
          resourceId: '/web/timecard-management/timecard/时长(小时)',
        },
        {
          label: '状态',
          prop: 'status',
          resourceId: '/web/timecard-management/timecard/状态',
          formatter: (row) => formatter('timeCardStatus', row.status),
        },
        {
          label: '操作',
          resourceId: '/web/timecard-management/timecard/操作',
          buttons: [
            {
              label: '详情',
              class: 'table-button-green',
              size: 'small',
              click: this.handleDetail,
              resourceId: '/web/timecard-management/timecard/详情',
            },
          ],
        },
      ],
      tableData: {},
    }
  },
  methods: {
    reset() {
      this.form = {
        batchNum: '',
        endTime: null,
        startTime: null,
      }
    },
    handleTableData(params) {
      queryTimecardList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
    multipleSelection(val) {
      let batchNumArr = []
      val.forEach((item) => {
        batchNumArr.push(item.integralId)
      })
      this.batchNumArr = batchNumArr
    },
    handleBatchDelete() {
      if (!this.batchNumArr.length) {
        this.$message({
          showClose: true,
          message: '请先勾选要删除的时长卡券码！',
        })
        return
      }
      this.$confirm('您确定要删除选中券码吗?', '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          deleteTimecard({ integralId: this.batchNumArr.join(',') }).then(
            () => {
              this.$message({
                type: 'success',
                showClose: true,
                message: '操作成功',
              })
              this.refreshTable()
            }
          )
        })
        .catch((err) => console.log(err))
    },
    handleDetail(val) {
      this.$router.push(`/timeCard/timeCardDetail/${val.integralId}`)
    },
  },
}
</script>
